<template>
	<view class="cates">
		<SearchInput></SearchInput>
		<div class="cates_container">
			<!-- 左侧菜单 -->
			<scroll-view scroll-y="true" class="left_menu">
				<view :class="{'menu_item':true,'active':index==currentIndex}" v-for="(item,index) in leftMenuList"
					:key="item" @click="handleItemTap" :data-index="index">
					{{item}}
				</view>
			</scroll-view>
			<!-- 右侧商品内容 -->
			<scroll-view scroll-y="true" :scroll-top="scrollTop" class="right_content">
				<view class="goods_group" v-for="(item1,index1) in rightContent" :key="item1.cat_name">
					<view class="goods_title">
						<text class="delimiter">/</text>
						<text class="title">{{item1.cat_name}}</text>
						<text class="delimiter">/</text>
					</view>
					<view class="goods_list">
						<navigator :url="`/pages/goodList/goodList?cid=${item2.cat_id}`"
							v-for="(item2,index2) in item1.children" :key="item2.cat_id">
							<image :src="item2.cat_icon" mode="widthFix"></image>
							<view class="goods_name">
								{{item2.cat_name}}
							</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</div>
	</view>
</template>

<script>
	import {
		request
	} from "../../utils/api.js";
	export default {

		data() {
			return {
				leftMenuList: [],
				rightContent: [],
				currentIndex: 0,
				scrollTop: 0,
				Cates: [],
			};
		},
		onLoad() {
			const cates = uni.getStorageSync("cates")
			if (!cates) {
				this.getCates()
			} else {
				//有旧数据 定义过期时间 10s改为5分钟
				if (Date.now() - cates.time > 1000 * 10){
					//重新发送请求
					this.getCates()
				}else{
					this.Cates = cates.data;
					this.leftMenuList=cates.data.map(v=>v.cat_name);
					this.rightContent=cates.data[0].children;
				}
			}
		},
		methods: {
			async getCates() {
				const res = await request({
					url: "/categories"
				});
				this.Cates = res;
				console.log(this.Cates);
				console.log(1)
				uni.setStorageSync("cates", {
					time: Date.now(),
					data: res
				})
				this.leftMenuList = res.map(v => v.cat_name)
				this.rightContent = res[0].children;
			},
			handleItemTap(e) {
				// console.log(e.currentTarget.dataset)
				const {
					index
				} = e.currentTarget.dataset;
				// console.log(this.Cates)
				this.rightContent = this.Cates[index].children;
				this.currentIndex = index;
				this.scrollTop = 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
  height: 100%;
}
.cates{
  height: 100%;
  .cates_container{
    /* less中使用calc的时候要注意 */
    height: calc( 100vh - 90rpx );
    display: flex;
    .left_menu{
      /* 子项 高度 100% flex */
      flex: 2;
     
      .menu_item{
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
      }
      .active{
        color: $theme-color;
        border-left: 5rpx solid $theme-color;
      }
    }
    .right_content{
       /* 子项 高度 100% flex */
      flex: 5;
      .goods_group{
        .goods_title{
          height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .delimiter{
            color: #ccc;
            padding: 0 10rpx;
          }
          .title{}
        }
        .goods_list{
          display: flex;
          flex-wrap: wrap;
          navigator{
            width: 33.33%;
            text-align: center;
            image{
              width: 50%;
            }
            .goods_name{}
          }
        }
      }
    }
  }
}
</style>
